<template>
	<view class="page-container">
		
		<view class="header">
			<view class="header-content">
				<text class="title">积分商城</text>
				<view class="points-info">
					<text class="points">2680积分</text>
					<uni-icons type="list" size="24" class="detail-icon" />
				</view>
			</view>
		
			<view class="search-box">
				<uni-icons type="search" size="20" class="search-icon" />
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" />
			</view>
		</view>
	
		<scroll-view scroll-y class="content-scroll">
		
			<scroll-view scroll-x class="benefits-scroll" show-scrollbar="false">
				<view class="benefits-container">
					<view class="benefit-card" v-for="(item, index) in benefits" :key="index">
						<image class="benefit-icon" :src="item.icon" mode="aspectFill" />
						<text class="benefit-title">{{ item.title }}</text>
					</view>
					<view class="benefit-card">
						<image class="benefit-icon" :src="orderIcon" mode="aspectFill" />
						<text class="benefit-title">我的订单<text class="mini-badge"
								v-if="orderCount">{{ orderCount }}</text></text>
					</view>
				</view>
			</scroll-view>
		
			<scroll-view scroll-x class="category-scroll" show-scrollbar="false">
				<view class="category-container">
					<view v-for="(category, index) in categories" :key="index" class="category-item"
						:class="{ 'category-active': currentCategory === index }" @tap="selectCategory(index)">
						{{ category }}
					</view>
				</view>
			</scroll-view>
		
			<view class="products-grid">
				<view class="product-card" v-for="(product, index) in products" :key="index">
					<image class="product-image" :src="product.image" mode="aspectFill" />
					<view class="product-info">
						<text class="product-name">{{ product.name }}</text>
						<view class="product-bottom">
							<text class="product-points">{{ product.points }}积分</text>
							<button class="exchange-btn" size="mini">兑换</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { UniIcons } from '@dcloudio/uni-ui';
export default {
	components: {
		'uni-icons': UniIcons,
		
	},
	data() {
		return {
			currentCategory: 0,
			orderCount: 2,
			orderIcon: '',
			benefits: [
				{
					title: '积分规则',
					icon: ''
				},
				{
					title: '会员特权',
					icon: ''
				},
				{
					title: '每日签到',
					icon: ''
				}
			],
			categories: ['全部商品', '热门推荐', '限时兑换', '新品上架', '生活家电', '数码产品'],
			products: [
				{
					name: '小米无线蓝牙耳机',
					points: 2999,
					image: ''
				},
				{
					name: '智能手环',
					points: 1999,
					image: ''
				},
				{
					name: '便携式榨汁机',
					points: 1599,
					image: ''
				},
				{
					name: '智能体重秤',
					points: 899,
					image: ''
				}
			]
		};
	},
	methods: {
		selectCategory(index) {
			this.currentCategory = index;
		}
	}
};
</script>

<style>
page {
	height: 100%;
}

.page-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
}

.header {
	flex-shrink: 0;
	padding: 20rpx 30rpx;
	background-color: #ffffff;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.title {
	font-size: 18px;
	font-weight: bold;
	color: #333333;
}

.points-info {
	display: flex;
	align-items: center;
}

.points {
	font-size: 14px;
	color: #007AFF;
	margin-right: 20rpx;
}

.detail-icon {
	width: 24px;
	height: 24px;
}

.search-box {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 32rpx;
	padding: 16rpx 24rpx;
}

.search-icon {
	width: 20px;
	height: 20px;
	margin-right: 16rpx;
}

.placeholder {
	font-size: 14px;
	color: #999999;
}

.content-scroll {
	flex: 1;
	overflow: auto;
}

.benefits-scroll {
	padding: 30rpx;
	white-space: nowrap;
}

.benefits-container {
	display: inline-flex;
	padding-right: 30rpx;
}

.benefit-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-right: 20rpx;
	width: 200rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.benefit-icon {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 16rpx;
}

.benefit-title {
	font-size: 14px;
	color: #333333;
	position: relative;
}

.mini-badge {
	position: absolute;
	top: -8rpx;
	right: -16rpx;
	background-color: #007AFF;
	color: #ffffff;
	font-size: 12px;
	padding: 0 8rpx;
	border-radius: 16rpx;
	transform: scale(0.8);
}

.category-scroll {
	background-color: #ffffff;
	padding: 20rpx 0;
	white-space: nowrap;
}

.category-container {
	display: inline-flex;
	padding: 0 30rpx;
}

.category-item {
	padding: 12rpx 32rpx;
	margin-right: 20rpx;
	font-size: 14px;
	color: #666666;
	background-color: #f5f5f5;
	border-radius: 32rpx;
}

.category-active {
	background-color: #007AFF;
	color: #ffffff;
}

.products-grid {
	padding: 30rpx;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.product-card {
	background-color: #ffffff;
	border-radius: 16rpx;
	overflow: hidden;
}

.product-image {
	width: 100%;
	height: 320rpx;
}

.product-info {
	padding: 20rpx;
}

.product-name {
	font-size: 14px;
	color: #333333;
	margin-bottom: 16rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.product-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-points {
	font-size: 14px;
	color: #007AFF;
	font-weight: bold;
}

.exchange-btn {
	background-color: #007AFF;
	color: #ffffff;
	font-size: 12px;
	padding: 0 24rpx;
}</style>